<template>
    <div class="container">
        <video 
        :src="src"
        autoplay
        loop
        muted
        playsInline
        id="myvideo"
        class="myvideo"
        >
        </video>
        <div class="myform">
            <div class="title">
                <h2>社区管理系统</h2>
            </div>
            <div class="body-ele">
                <el-tabs v-model="activeName" class="demo-tabs" :stretch="true" @tab-click="handleClick">
                    <el-tab-pane class="demo-tabs-label" label="用户名登录" name="username">
                        <byName></byName>
                    </el-tab-pane>
                    <el-tab-pane class="demo-tabs-label" label="手机号登录" name="phone">
                         <byPhone></byPhone>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import {reactive,toRefs} from 'vue' ; 
import byName from './byName.vue';
import byPhone from './byPhone.vue';
export default {
    components:{
        byName,
        byPhone
    },
    setup(props){
        const state = reactive({
            activeName:'username',
            src:'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4'
        });
        return {
            ...toRefs(state)
        }
    }
}
</script>
<style lang="scss" scoped>
.container{
    height: 100%;
    width: 100%;
    // border: 1px solid red;
    .myvideo{
        position: fixed;
        min-width: 100%;
        min-height: 100%;
        z-index: 0;
        top:0;
        left: 0;
    }
    .myform{
        position: absolute;
        width: 500px;
        height: 380px;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 1px rgb(88, 70, 70),
        -1px -1px 1px rgb(112, 66, 66),
        -1px 1px 1px rgb(112, 66, 66),
        1px -1px 1px rgb(112, 66, 66),
        ;
        border-radius: 5px;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto auto ;
        .title{
            height: 44px;
            width: 100%;
            text-align: center;
            line-height: 44px;
            font-size: 22px;
            color: #fff;
            margin: 10px 0px;
        }
        .body-ele{
            ::v-deep .el-tabs__item{
                font-size: 17px;
            }
        }
    }
}
</style>

